.work_flow {
  width: 100%;
  height: 100%;
  :global {
    .work_node {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: 1px solid #c2c8d5;
      border-left: 4px solid #5F95FF;
      border-radius: 4px;
      box-shadow: 0 2px 5px 1px rgb(0 0 0 / 6%);
    }
    .work_node img {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      margin-left: 8px;
    }
    .work_node .label {
      display: inline-block;
      flex-shrink: 0;
      width: 104px;
      margin-left: 8px;
      color: #666;
      font-size: 12px;
    }
    .work_node .status {
      flex-shrink: 0;
    }
    .work_node.success {
      border-left: 4px solid #52c41a;
    }
    .work_node.failed {
      border-left: 4px solid #ff4d4f;
    }
    .work_node.running .status img {
      animation: spin 1s linear infinite;
    }
    .x6-node-selected .work_node {
      border-color: #1890ff;
      border-radius: 2px;
      box-shadow: 0 0 0 4px #d4e8fe;
    }
    .x6-node-selected .work_node.success {
      border-color: #52c41a;
      border-radius: 2px;
      box-shadow: 0 0 0 4px #ccecc0;
    }
    .x6-node-selected .work_node.failed {
      border-color: #ff4d4f;
      border-radius: 2px;
      box-shadow: 0 0 0 4px #fedcdc;
    }
    .x6-edge:hover path:nth-child(2){
      stroke: #1890ff;
      stroke-width: 1px;
    }

    .x6-edge-selected path:nth-child(2){
      stroke: #1890ff;
      stroke-width: 1.5px !important;
    }

    @keyframes running-line {
      to {
        stroke-dashoffset: -1000;
      }
    }
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
  .flow_log {
    position: absolute;
    bottom: 0;
    width: 100%;
  }


  .node .status {
    flex-shrink: 0;
  }

  .node {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 8Px;
    background-color: #fff;
    border: 1Px solid #c2c8d5;
    border-top: 4Px solid #5f95ff;
    border-radius: 4Px;
    box-shadow: 0 2Px 5Px 1Px rgb(0 0 0 / 6%);
    svg {
      width: 20Px;
      height: 20Px;
    }
    .label {
      display: inline-block;
      width: 144Px;
      margin-left: 8Px;
      color: #666;
      font-size: 12Px;
    }
  }
  .node_z {
    border-top: 4Px solid #8d5ded;
  }
  .node_green {
    border-top: 4Px solid #13c2c2;
  }
  .node_red {
    border-top: 4Px solid #ef5350;
  }
  .node_blue {
    border-top: 4Px solid #1890ff;
  }
  .running {
    // animation: spin 1s linear infinite;
  }

  @keyframes running_line {
    to {
      stroke-dashoffset: -1000;
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  :global {
    .x6-node-selected {
      .node_z {
        border-color: #8d5ded;
        border-radius: 2px;
        box-shadow: 0 0 0 4px rgb(141 93 237 / 10%);
      }
      .node_green {
        border-color: #13c2c2;
        border-radius: 2px;
        box-shadow: 0 0 0 4px rgb(19 194 194 / 10%);
      }
      .node_red {
        border-color: #ef5350;
        border-radius: 2px;
        box-shadow: 0 0 0 4px rgb(239 83 80 / 10%);
      }
      .node_blue {
        border-color: #1890ff;
        border-radius: 2px;
        box-shadow: 0 0 0 4px rgb(0 132 255 / 10%);
      }
    }
    .x6-edge:hover {
      path:nth-child(2) {
        stroke: #1890ff;
        stroke-width: 1px;
      }
    }

    .x6-edge-selected {
      path:nth-child(2) {
        stroke: #1890ff;
        stroke-width: 1.5px !important;
      }
    }
  }

  .flow_log {
    position: absolute;
    bottom: 0;
    width: 100%;
  }



  .offline_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 12px;
    line-height: 24px;
    text-align: center;
    border-radius: 2px;
  }

  .offline_icon_green {
    color: #13c2c2;
    background-color: rgb(19 194 194 / 10%);
  }
  .offline_icon_red {
    color: #ef5350;
    background-color: rgb(239 83 80 / 10%);
  }
  .offline_icon_blue {
    color: #0084ff;
    background-color: rgb(0 132 255 / 10%);
  }
  .offline_icon_z {
    color: #8d5ded;
    background-color: rgb(141 93 237 / 10%);
  }
}
